<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://1stjs.googlecode.com/svn/trunk/fw4/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片放大镜效果演示</title>
<style style="text/css">
*{margin:0;}
.small_box{position:relative; margin:50px auto auto 50px; width:350px; height:350px;}
.big_box{position:absolute; left:420px; top:50px; width:400px; height:400px; overflow:hidden;}
</style>
<script type="text/javascript" src="1st.js"></script>
<script type="text/javascript" src="data/js/zoomImg.js"></script>
</head>
<body>
<div class="small_box">
	<img id="demoImg" src="data/img/zoomImg/img01.jpg" bigimg="data/img/zoomImg/img01.jpg" />
</div>

<script type="text/javascript">
~function(obj){
	var img = F(obj).css("width:100%; height:100%;"),
		sbox = img.parent().hover(function(e){
			mirror.show() && bigimg.src(img.attr('bigimg')) && ibox.show();
		},function(e){
			mirror.hide() && ibox.hide();
		}).bind("mousemove", function(e){
			var x = F.limit(e.clientX-p.x-sw/2,0,sw);
			var y = F.limit(e.clientY-p.y-sh/2,0,sh);
			mirror.pos(x,y);
			ibox.scrollLeft(x/sw*iw).scrollTop(y/sh*ih);
		}),
		p = sbox.abspos(1),
		sw = sbox.width()/2,
		sh = sbox.height()/2,
		mirror = sbox.append("div").ps().rect(0,sh,sw,sh).bg("#fede4f").border("#aaa").cursor("move").opacity(0.5).hide();	
		ibox = sbox.parent().append("div").cls("big_box").hide();
		iw = ibox.width(),
		ih = ibox.height(),
		bigimg = ibox.append("img").css("width:200%; height:200%;");
}("demoImg");
</script>
</body>
</html>